<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<p>history api test</p>
<button id="btn1">修改 url</button>
<script>

// 点击跳转的时候, 通过 history.pushState 来改变 url
// 通过监听 window.onpopstate, 可以获得 pathname, 来渲染对应的页面
  // 不过需要后端支持, 因为跳转后, 重新刷新会向后端发起 http 请求

// 页面初次加载 获取 path
document.addEventListener('DOMContentLoaded', () => {
  console.log('first loaded pathname:', location.pathname);
});

// 打开一个新的路由, 用 pushState 的方式, 浏览器不会刷新页面
document.querySelector('#btn1').addEventListener('click', () => {
  const state = { name: 'page1' };
  console.log('切换路由到:', 'page1');
  history.pushState(state, '', 'page1');
});

// 监听浏览器前进后退
window.onpopstate = (e) => {
  console.log('onpopstate', e.state, location.pathname);
}

// 需要后端支持, 返回一个 index.html, 不然 /page1 页面会不存在
// 后台只要返回 index.html, 具体页面交给前端去实现
</script>
</body>
</html>